<template>
  <div class="dashboard">
    <ElCard class="a" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">概览</small>
          </div>
          <div class="actions">
            <ElIcon><Setting /></ElIcon>
          </div>
        </div>
      </template>
      <div class="content">
        <div class="item">
          <ElStatistic :value="contractCountValue" />
          <div>新访问</div>
        </div>
        <div class="item">
          <ElStatistic :value="contractCountValue" />
          <div>消息</div>
        </div>
        <div class="item">
          <ElStatistic :value="contractCountValue" />
          <div>毛利</div>
        </div>
        <div class="item">
          <ElStatistic :value="contractCountValue" />
          <div>GP</div>
        </div>
      </div>
    </ElCard>
    <ElCard class="b" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">信用</small>
            <span class="num">
              <ElStatistic :value="contractCountValue" />
            </span>
            <small class="tips">(个)</small>
          </div>
          <div class="actions">
            <ElIcon><Setting /></ElIcon>
          </div>
        </div>
      </template>
      <div class="content">
        <div class="item">
          <b>6</b>
          <div>待我审批</div>
        </div>
        <div class="item">
          <b>5</b>
          <div>我发起的</div>
        </div>
        <div class="item">
          <b>0</b>
          <div>抄送我的</div>
        </div>
      </div>
    </ElCard>
    <ElCard class="d" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">合同</small>
            <span class="num">
              <ElStatistic :value="contractCountValue" />
            </span>
            <small class="tips">(份)</small>
          </div>
          <div class="actions">
            <ElIcon><Setting /></ElIcon>
          </div>
        </div>
      </template>
      <div class="content">
        <div class="item">
          <b><ElStatistic :value="contractCountValue" /></b>
          <div>待签字</div>
        </div>
        <div class="item">
          <b><ElStatistic :value="contractCountValue" /></b>
          <div>在租中</div>
        </div>
        <div class="item">
          <b><ElStatistic :value="contractCountValue" /></b>
          <div>即将搬出</div>
        </div>
        <div class="item">
          <b><ElStatistic :value="contractCountValue" /></b>
          <div>已到期</div>
        </div>
      </div>
    </ElCard>
    <ElCard class="e" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">客户</small>
            <span class="num">
              <ElStatistic :value="contractCountValue" />
            </span>
            <small class="tips">(个)</small>
          </div>
          <div class="actions">
            <ElIcon><Setting /></ElIcon>
          </div>
        </div>
      </template>
      <div class="content">
        <div class="item">
          <b><ElStatistic :value="contractCountValue" /></b>
          <div>今日预定</div>
        </div>
        <div class="item">
          <b><ElStatistic :value="contractCountValue" /></b>
          <div>跟进中</div>
        </div>
        <div class="item">
          <b><ElStatistic :value="contractCountValue" /></b>
          <div>已达成</div>
        </div>
        <div class="item">
          <b><ElStatistic :value="contractCountValue" /></b>
          <div>已到期</div>
        </div>
      </div>
    </ElCard>
    <ElCard class="c" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">待办事项</small>
            <span class="num">
              {{ sortTodoList.filter((v) => !v.isCompleted).length }}
            </span>
            <small class="tips">(个)</small>
          </div>
          <div class="actions">
            <ElIcon class="hover" @click="handleAddTodo"><Plus /></ElIcon>
          </div>
        </div>
      </template>
      <ElScrollbar>
        <ElTable :data="sortTodoList" style="width: 100%">
          <ElTableColumn
            prop="level"
            label="优先级"
            width="90"
            :filters="[
              { text: '已完成', value: 0 },
              { text: '重要', value: 1 },
              { text: '中等', value: 2 },
              { text: '不重要', value: 3 },
            ]"
            :filter-method="(value, row) => row.level === value"
          >
            <template #default="scope">
              <ElTag
                :type="
                  ['success', 'danger', 'warning', 'primary'][scope.row.level]
                "
              >
                {{
                  scope.row.level === 0
                    ? "已完成"
                    : scope.row.level === 1
                    ? "重要"
                    : scope.row.level === 2
                    ? "中等"
                    : "不重要"
                }}
              </ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn
            prop="title"
            label="事项"
            show-overflow-tooltip
            :tooltip-formatter="({ row }) => `${row.title} - ${row.remark}`"
          >
          </ElTableColumn>
          <ElTableColumn prop="createDate" label="创建时间">
            <template #default="scope">
              <span>{{ formatDate(scope.row.createDate) }}</span>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="completionTime" label="预计完成时间">
            <template #default="scope">
              <ElText
                :type="
                  compareDate('', scope.row.completionTime) &&
                  !scope.row.isCompleted
                    ? 'danger'
                    : ''
                "
              >
                {{ formatDate(scope.row.completionTime) }}
              </ElText>
            </template>
          </ElTableColumn>
          <ElTableColumn label="操作" width="75">
            <template #default="scope">
              <ElTooltip content="完成" placement="top">
                <ElButton
                  type="success"
                  icon="Check"
                  link
                  @click="handleCompleted(scope.$index)"
                />
              </ElTooltip>
              <ElTooltip content="删除" placement="top">
                <ElButton
                  type="danger"
                  icon="Delete"
                  link
                  @click="handleDeleteTodo(scope.$index)"
                />
              </ElTooltip>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElScrollbar>
    </ElCard>
    <ElCard class="f chart" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">概览</small>
          </div>
          <div class="actions">
            <ElIcon><Setting /></ElIcon>
          </div>
        </div>
      </template>
      <Charts
        :options="{
          xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
          ],
        }"
        chartType="line"
      />
    </ElCard>
    <ElCard class="g chart" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">概览</small>
          </div>
          <div class="actions">
            <ElIcon><Setting /></ElIcon>
          </div>
        </div>
      </template>
      <Charts
        :options="{
          xAxis: [
            {
              data: [
                '标准1',
                '标准2',
                '标准3',
                '标准4',
                '标准5',
                '标准6',
                '标准7',
              ],
            },
          ],
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
          ],
        }"
        chartType="bar"
      />
    </ElCard>
    <ElCard class="h chart" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">概览</small>
          </div>
          <div class="actions">
            <ElIcon><Setting /></ElIcon>
          </div>
        </div>
      </template>
      <Charts :options="{}" chartType="pie" />
    </ElCard>
    <ElCard class="i" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="title_content">
            <small class="title">公司公告</small>
          </div>
          <div class="actions">
            <ElIcon><Setting /></ElIcon>
          </div>
        </div>
      </template>
      <ElScrollbar>
        <ul class="news">
          <li>
            <span class="date">{{ formatDate("2025-06-01") }}</span>
            <span class="title">公告标题12312312312312312312312312321</span>
            <span class="user">发布人</span>
          </li>
        </ul>
      </ElScrollbar>
    </ElCard>
  </div>
</template>

<script setup lang="jsx">
import { computed, inject, ref } from "vue";
import { useTransition } from "@/hooks";
import { useTodo } from "./index";
import { compareDate, formatDate } from "@/utils";
import Charts from "@/components/Basic/Charts/index.vue";

defineOptions({
  name: "Index",
});

const globalConfig = inject("globalConfig");
const loginUserInfo = inject("loginUserInfo");
const contractCountValue = useTransition(1205); // 合同总数
const data = ref([]);
const todoFormComponent = (todoForm) => (
  <ElForm model={todoForm.value} label-width="auto">
    <ElFormItem label="重要等级" prop="level">
      <ElSelect v-model={todoForm.value.level}>
        <ElOption label="重要" value={1} />
        <ElOption label="中等" value={2} />
        <ElOption label="不重要" value={3} />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="待办事项" prop="title" required>
      <ElInput v-model={todoForm.value.title} placeholder="待办事项" />
    </ElFormItem>
    <ElFormItem label="备注" prop="remark">
      <ElInput
        v-model={todoForm.value.remark}
        placeholder="备注"
        type="textarea"
      />
    </ElFormItem>
    <ElFormItem label="预计完成时间" prop="completionTime">
      <ElDatePicker
        v-model={todoForm.value.completionTime}
        type="date"
        placeholder="请选择预计完成时间"
        value-format="YYYY-MM-DD"
      />
    </ElFormItem>
  </ElForm>
);

const {
  todoList,
  handleAddTodo,
  handleDeleteTodo,
  handleEditTodo,
  handleCompleted,
} = useTodo(todoFormComponent);

const sortTodoList = computed(() => {
  const res = [];
  let prveSuccess = null;
  for (let i = 0; i < todoList.value.length; i++) {
    const item = todoList.value[i];
    if (item.level === 0) {
      prveSuccess = i;
      res.push(item);
      continue;
    }
    if (item.level === 1) {
      res.unshift(item);
    } else {
      if (prveSuccess === null) {
        res.push(item);
      } else {
        res.splice(prveSuccess, 0, item);
      }
    }
  }
  return res;
});
</script>

<style scoped>
.dashboard {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "A B C" "D E C" "F F F" "G H I";
}
.el-card {
  display: flex;
  min-height: 140px;
  flex-direction: column;
}
.el-card :deep(.el-card__body) {
  flex: 1 0 0;
  overflow: auto;
}
.el-card.chart {
  min-height: 400px;
}

.el-card.a {
  grid-area: A;
}
.el-card.b {
  grid-area: B;
}
.el-card.c {
  grid-area: C;
}
.el-card.d {
  grid-area: D;
}
.el-card.e {
  grid-area: E;
}
.el-card.f {
  grid-area: F;
}
.el-card.g {
  grid-area: G;
}
.el-card.h {
  grid-area: H;
}
.el-card.i {
  grid-area: I;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header .title {
  font-weight: bold;
}
.card-header .num {
  margin: 0 5px;
  color: var(--el-color-primary);
  font-weight: bold;
}
.card-header .title_content {
  display: flex;
  align-items: center;
}
.card-header .title_content .el-statistic :deep(.el-statistic__number) {
  color: var(--el-color-primary);
  font-weight: bold;
}
.content {
  display: flex;
  justify-content: space-between;
  flex: 1 0 0;
  text-align: center;
}
.todo-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.todo-list .todo-row {
  display: flex;
  justify-content: space-between;
}
.todo-list .el-scrollbar {
  flex: 1 0 0;
}

.news li {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid var(--el-border-color);
  cursor: pointer;
  transition: background 0.3s;
}
.news li:hover {
  background-color: var(--el-fill-color-light);
}
.news li span + span {
  margin-left: 12px;
}
.news li .title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
